<template>
  <div class="item-layout-two">
    <div class="item-annotate">
      <!--<div-->
      <!--  class="item-annotate-box"-->
      <!--  :style="{-->
      <!--    color: formatterColor({ status: '未开始' }),-->
      <!--    border: `1px solid ${formatterColor({ status: '未开始' })}`,-->
      <!--  }">-->
      <!--  未开始-->
      <!--</div>-->
      <!--<div-->
      <!--  class="item-annotate-box"-->
      <!--  :style="{-->
      <!--    color: formatterColor({ status: '处理中' }),-->
      <!--    border: `1px solid ${formatterColor({ status: '处理中' })}`,-->
      <!--  }">-->
      <!--  处理中-->
      <!--</div>-->
      <!--<div-->
      <!--  class="item-annotate-box"-->
      <!--  :style="{-->
      <!--    color: formatterColor({ status: '延期' }),-->
      <!--    border: `1px solid ${formatterColor({ status: '延期' })}`,-->
      <!--  }">-->
      <!--  延期-->
      <!--</div>-->
      <!--<div-->
      <!--  class="item-annotate-box"-->
      <!--  :style="{-->
      <!--    color: formatterColor({ status: '变更' }),-->
      <!--    border: `1px solid ${formatterColor({ status: '变更' })}`,-->
      <!--  }">-->
      <!--  变更-->
      <!--</div>-->
      <div></div>
    </div>
    <el-table
      class="elTable"
      ref="tableRef"
      :data="newTaskList"
      row-key="id"
      default-expand-all
      :row-style="rowStyle"
      :indent="20"
      height="100%"
      :header-cell-class-name="headerCellClass">
      <!-- <el-table-column prop="itemName" label="标题" sortable>
        <template #default="scope">
          {{ scope.row.itemName || scope.row.taskTitle }}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="任务分类" sortable>
        <template #default="scope">
          {{ dict.translate('task_type', scope.row.taskType) }}
        </template>
      </el-table-column>
      <el-table-column prop="itemBegin" label="开始时间" sortable>
        <template #default="{ row }">
          {{ row.isTask ? row.planBegintime : row.itemBegin }}
        </template>
      </el-table-column>
      <el-table-column prop="itemEnd" label="结束时间" sortable>
        <template #default="{ row }">
          {{ row.isTask ? row.planEndtime : row.itemEnd }}
        </template>
      </el-table-column> -->
      <el-table-column
        v-for="(column, index) in dataLayoutTwo.columnList"
        :key="index"
        :prop="column.prop"
        :label="column.label"
        :width="column.width"
        sortable
        :min-width="column.minWidth">
        <template #header>
          <span v-if="column.label === '标题'">
            <el-popover placement="bottom" :teleported="true">
              <div class="modal-box">
                <el-checkbox-group v-model="dataLayoutTwo.checkList" @change="handleCheck">
                  <el-checkbox
                    v-for="(item, index) in dataLayoutTwo.checkOption"
                    :disabled="item.disabled"
                    :label="item.label"
                    :key="index" />
                </el-checkbox-group>
              </div>
              <template #reference>
                <img src="@/assets/image/project/list.png" alt="" class="list-img" />
              </template>
            </el-popover>
            <span>{{ column.label }}</span>
          </span>
          <span v-else>{{ column.label }}</span>
        </template>
        <template #default="scope">
          <span v-if="column.label === '标题'" :style="{ color: scope.row.itemColor }">
            {{ scope.row.itemName || scope.row.taskTitle }}
          </span>
          <span v-if="column.label === '任务类型'">
            {{ dict.translate('task_type', scope.row.taskProp) }}
          </span>
          <span v-if="column.label === '开始时间'">
            {{
              scope.row.isTask
                ? dayjs(scope.row.planBegintime).format('YYYY-MM-DD')
                : dayjs(scope.row.itemBegin).format('YYYY-MM-DD')
            }}
          </span>
          <span v-if="column.label === '结束时间'">
            {{
              scope.row.isTask
                ? dayjs(scope.row.planEndtime).format('YYYY-MM-DD')
                : dayjs(scope.row.itemEnd).format('YYYY-MM-DD')
            }}
          </span>
          <span v-if="column.label === '负责人'">
            {{ scope.row.isTask ? scope.row.taskUserName : scope.row.itemManagerName }}
          </span>
          <span v-if="column.label === '管理人'">
            {{ scope.row.taskLeaderName }}
          </span>
          <span v-if="column.label === '协助人'">
            {{ scope.row.taskAssistName }}
          </span>
          <span v-if="column.label === '任务状态'">
            {{ formatWorkStatus(scope.row.currentStatus)?.label }}
          </span>
          <span v-if="column.label === '任务优先级'">
            {{ dict.translate('task_priority', scope.row.taskPriority) }}
          </span>
          <span v-if="column.label === '是否延期'">
            {{ scope.row.delayFlag === 1 ? '已延期' : '' }}
          </span>
          <span v-if="column.label === '消耗累计人天'">
            {{ scope.row.currentCostDays }}
          </span>
          <span v-if="column.label === '消耗累计工时'">
            {{ scope.row.currentCostHour }}
          </span>
          <span v-if="column.label === '预计剩余工时'">
            {{ scope.row.expHours }}
          </span>
          <span v-if="column.label === '计划历经天数'">
            {{ scope.row.planCostDay }}
          </span>
          <span v-if="column.label === '计划工时'">
            {{ scope.row.planCostHour }}
          </span>
          <span v-if="column.label === '周期说明'">
            {{ scope.row.taskCycleName }}
          </span>
          <span v-if="column.label === '任务说明'">
            {{ convertToPlain(scope.row.taskDetail) }}
          </span>
          <span v-if="column.label === '创建时间'">
            {{ scope.row.createdTime }}
          </span>
          <span v-if="column.label === '更新时间'">
            {{ scope.row.updatedTime }}
          </span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { convertToPlain, formatWorkStatus } from '@/utils/task-utils.js'
import Sortable from 'sortablejs'
import { useDictionary } from '@/use/use-dictionary'
import dayjs from 'dayjs'

const dict = useDictionary(['task_type', 'task_priority'])
const dataLayoutTwo = reactive({
  current: 0,
  checkOption: [
    {
      label: '标题',
      minWidth: 200,
      disabled: true,
    },
    {
      label: '任务类型',
      prop: 'taskType',
      minWidth: 130,
    },
    {
      label: '开始时间',
      prop: 'startDate',
      minWidth: 150,
    },
    {
      label: '结束时间',
      prop: 'endDate',
      minWidth: 150,
    },
    {
      label: '管理人',
      prop: 'managePerson',
      width: '130',
    },
    {
      label: '负责人',
      prop: 'dutyPerson',
      width: '130',
    },
    {
      label: '协助人',
      width: '130',
    },
    {
      label: '任务状态',
      width: '130',
    },
    {
      label: '任务优先级',
      width: '130',
    },
    {
      label: '是否延期',
      width: '130',
    },
    {
      label: '消耗累计人天',
      width: '150',
    },
    {
      label: '消耗累计工时',
      width: '150',
    },
    {
      label: '预计剩余工时',
      width: '150',
    },
    {
      label: '计划历经天数',
      width: '150',
    },
    {
      label: '计划工时',
      width: '130',
    },
    {
      label: '周期说明',
      width: '130',
    },
    {
      label: '任务说明',
      width: '200',
    },
    {
      label: '创建时间',
      minWidth: 170,
    },
    {
      label: '更新时间',
      minWidth: 170,
    },
  ],
  checkList: ['标题', '任务类型', '开始时间', '结束时间', '管理人', '负责人', '协助人'],
  treeNode: {},
  columnList: [],
  dropList: [],
  tableData: [],
  dataList: [
    {
      status: '未开始',
      id: 1,
      prop: 'title',
      label: '标题',
    },
    {
      status: '未开始',
      id: 1,
      prop: 'taskType',
      label: '任务类型',
    },
    {
      status: '未开始',
      id: 1,
      prop: 'startDate',
      label: '开始时间',
    },
    {
      status: '未开始',
      id: 1,
      prop: 'endDate',
      label: '结束时间',
    },
    {
      label: '管理人',
    },
    {
      label: '负责人',
    },
    {
      label: '协助人',
    },
  ],
  tableObject: {},
})

const props = defineProps({
  taskList: {
    type: Array,
    default: () => [],
  },
  // dataItemCard: Object,
})

onMounted(() => {
  dataLayoutTwo.dataList.forEach((item) => {
    dataLayoutTwo.checkList.forEach((check) => {
      if (item.label === check) {
        let params = {
          ...item,
          // width: '130',
        }
        dataLayoutTwo.columnList.push(params)
        dataLayoutTwo.dropList.push(params)
      }
    })
  })
  dataLayoutTwo.tableData = [
    {
      title: dataLayoutTwo.tableData,
      taskType: '111',
      startDate: '2023-11-14',
    },
    {
      title: '',
      taskType: '2222',
      startDate: '2023-11-14',
    },
  ]
  // 阻止默认行为
  document.body.ondrop = function (event) {
    event.preventDefault()
    event.stopPropagation()
  }
  columnDrop()
})

//列拖拽：列拖拽方法实际上就是修改表头数据的值
const mykey = ref(0)
function columnDrop() {
  const table = document.querySelector('.elp-table__header-wrapper tr')
  dataLayoutTwo.tableObject = Sortable.create(table, {
    animation: 180,
    delay: 0,
    filter: '.headerCellClass0', // 过滤器，不需要进行拖动的元素
    preventOnFilter: true, //  在触发过滤器`filter`的时候调用`event.preventDefault()`
    direction: 'horizontal', // 拖拽方向 (默认情况下会自动判断方向)
    draggable: '.headerCellClass', // 允许拖拽的项目类名
    // 结束拖拽
    onEnd: (evt) => {
      if (evt.newIndex !== 0) {
        dataLayoutTwo.columnList = []
        const oldItem = dataLayoutTwo.dropList[evt.oldIndex]
        dataLayoutTwo.dropList.splice(evt.oldIndex, 1)
        dataLayoutTwo.dropList.splice(evt.newIndex, 0, oldItem)
        dataLayoutTwo.columnList = dataLayoutTwo.dropList
      } else {
        evt.newDraggableIndex = evt.oldDraggableIndex
        evt.newIndex = evt.oldIndex
      }
    },
  })
}
function rowStyle(row) {
  if (!row.row.isTask) {
    return 'background: var(--elp-color-primary-light-9);'
  }
}
function handleCheck() {
  //找到不在多选框中的数据
  dataLayoutTwo.columnList = []
  dataLayoutTwo.checkList.forEach((check) => {
    let node = dataLayoutTwo.checkOption.find((i) => i.label === check)
    dataLayoutTwo.columnList.push(node)
    dataLayoutTwo.dropList.push(node)
  })
}
function handleNodeClick(node) {
  dataLayoutTwo.treeNode = node
}
function handleTab(item, index) {
  dataLayoutTwo.current = index
}
function headerCellClass({ row, column, rowIndex, columnIndex }) {
  if (columnIndex === 0) {
    return `headerCellClass${rowIndex}`
  } else {
    return `headerCellClass`
  }
}

// 树形结构数据处理
function modifyChildren(children) {
  children.forEach((child) => {
    child.id = child.taskId
    child.isTask = true

    if (child.children) {
      modifyChildren(child.children)
    }
  })
}

const newTaskList = computed(() => {
  return props.taskList.map((i) => {
    i.id = i.itemId
    i.isTask = false
    if (i.children) {
      modifyChildren(i.children)
    }

    return i
  })
})
</script>

<style scoped lang="scss">
.item-layout-two {
  height: 100%;
  overflow: auto;
  .list-img {
    width: 25px;
    height: 22px;
    margin-right: 3px;
  }
  :deep(.elp-table) {
    .cell {
      border-left: none;
      height: 100%;
      @include use-flex(center, normal, row);
      span {
        cursor: pointer;
        @include use-flex(center, normal, row);
      }
      .elp-table__expand-icon > .elp-icon {
        width: 1.5em;
        height: 1.5em;
        background: url('~@/assets/image/project/close.png') no-repeat;
        background-size: 100% 100%;
      }
      .elp-table__expand-icon > .elp-icon svg {
        width: 0;
        height: 0;
      }
      /*有子节点 且已展开*/
      .elp-table__expand-icon--expanded > .elp-icon {
        width: 1.5em;
        height: 1.5em;
        background: url('~@/assets/image/project/open.png') no-repeat;
        background-size: 100% 100%;
      }
    }
    .elp-table__expand-icon--expanded,
    .elp-table__expand-icon {
      transform: rotate(0deg);
      width: 15px;
      height: 15px;
      line-height: 8px;
      margin-right: 10px;
    }
  }
}

.modal-box {
  height: 400px;
  overflow-y: auto;
}
</style>
